<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="../code_style.css" rel="stylesheet" type="text/css">
    <script src="../rainbow-custom.min.js"></script>

    <script src="../final.js"></script>
</head>
<body>
<div id="execution" class="execution"></div>

<div id="code1" class="code">
<pre>
<code data-language="coffeescript">

a = "AAA"
b = "BBB"
c = "CCC"
d = "DDD"


######################################################################################
## OUR ACTUAL 'TEMPLATES' INCLUDING BINDING AND BEHAVIOR
######################################################################################

direct_context_template =
  o.div(
    o.h2().text("Demonstrating passing a context in directly")
    o.p().text("The children of each context declaration recieve the full previous context stack.")
    o.p().text("Here context object is just a string.")
    o.ul(
      o.Context( a,
        o.li().text( (a) -> a )
        o.ul(
          o.Context( b,
            o.li().text( (b, a ) -> [b, a] )
            o.div().text((b) -> "A selector function can take one or more arguments from the stack as needed.")
          )
        )
      )
    )
  )

direct_context_template.SetContext()
direct_context_template.SetParentDOMElement( document.getElementById("execution") )


</code>
</pre>
</div>

<div id="execution2" class="execution"></div>
<div id="code2" class="code">
<pre>
<code data-language="coffeescript">

template =
  o.Context( list_model,
    o.div(
      o.h3().text( (data) -> data.title )
      # Here we're doing a direct assignment, the p's context stack will be ([ notes[i], list_model])
      o.List( notes,
        o.p().text( (note) -> note )
      )
      o.ul(
        o.List( ((data) -> data.items ),
          o.li(
            o.span().text((item) -> "Current Context: #{item}")
            o.p().text((args...) -> "  - Context Stack: #{JSON.stringify(args)}")
          )
        )
      )
    )
  )

template.template( document.getElementById("execution2") )

</code>
</pre>
</div>
<script src="example_context_nesting.js"></script>
</body>
</html>